/*
 * @FilePath: main.js
 * @Author: 杜芬
 * @Date: 2024-04-15 22:15:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-04-16 19:49:45
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
 */
// 目标

// 用代码控制摄像机位置和观察点，查看车内效果


import { scene, camera, controls } from './utils/init'
import * as THREE from 'three'
// 1. 引入加载 gltf/glb 模型文件的加载器
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

// 模型：包含网格，材质，贴图等信息的集合物体
// 模型文件：分为 .gltf, .glb, .fbx 等等类型
// 使用：借助 three.js 提供的 GLTFLoader 加载器可以加载 .gltf / .glb 模型文件，得到模型对象

function initBase() {
  // 2. 实例化加载器并加载模型文件：load() 异步
    new GLTFLoader().load('/model/ferrari.glb', gltf => {
        // 3. 取出模型对象并添加到场景中
        const model = gltf.scene
        // 遍历物体内部每个小物体组成
        model.traverse(obj => {
          if (obj.name === 'Object_3') {
            // 车身 颜色设置为红色
            obj.material.color = new THREE.Color(0xff0000)
          }
        
          // console.log(obj)
        })

        scene.add(model)
    })
 
  
}


// 环境光
function createLight() {
  // 重要：环境光只能照亮物体，无方向不能投影（反光）
  const light = new THREE.AmbientLight(0xffffff, 1)
  scene.add(light)

  const direction = new THREE.DirectionalLight(0xffffff, 2)
  direction.position.set(3, 3, 3)
  scene.add(direction)

  const helper = new THREE.DirectionalLightHelper(direction, 1);
  scene.add(helper);
}

// 位置：可以决定摄像机在空间中所处位置

// 观察点：可以影响摄像机往哪里看，默认（0,0,0）世界坐标中心原点

// 使用：修改摄像机位置和观察点


initBase()
createLight()

// 监听轨道控制器-旋转/拖拽等事件
// controls.addEventListener('change', () => {
//   console.log(camera.position) //  摄像机的位置
//   console.log(controls.position) // 轨道控制器的位置

// })

// 双击
window.addEventListener('dblclick', () => {
  camera.position.set(0.47, 1.12, -0.30)
   // 影响轨道控制器观察的目标位置（聚焦点）->影响摄像机查看的角度
   controls.target = new THREE.Vector3(0.47, 0.99, 0.06)

})